<template>
    <div
    class="mask"
    v-if="showCart && calculations.total > 0"
    @click="handleCartShowChange"
    />
    <div class="cart">
        <div class="product" v-if="showCart && calculations.total > 0">
          <div class="product__header">
            <div
            class="product__header__all"
            @click="() => setCartItemsChecked(shopId)">
                <span class="product__header__icon iconfont"
                v-html="calculations.allChecked ? '&#xe63a;': '&#xe667;' "
                ></span>
                <span class="product__header__text">全选</span>
            </div>
            <div class="product__header__clear">
            <span
            class="product__header__clear__btn"
            @click="() => cleanCartProducts(shopId)"
            >清空购物车</span>
            </div>
          </div>
          <div
          class="product__item"
          v-for="item in productList"
          :key="item._id"
          >
            <div class="product__item__checked iconfont"
            v-html="item.check ? '&#xe667;': '&#xe63a;' "
            @click="() => changeCartItemChecked(shopId, item._id)"
            >
            </div>
            <img class="product__item__img" :src="item.imgUrl"/>
            <div class="product__item__detail">
                <h4 class="product__item__title">{{item.name}}</h4>
                <p class="product__item__price">
                    <span class="product__item__yen">&yen; {{item.price}}</span>
                    <span class="product__item__origin">&yen; {{item.oldPrice}}</span>
                </p>
            </div>
            <div class="product__number">
                <span class="product__number__minus iconfont"
                @click="() => { changeCartItemInfo(shopId, item._id, item, -1) }"
                >&#xe906;</span>
                  {{item.count || 0}}
                <span class="product__number__plus iconfont"
                @click="() => { changeCartItemInfo(shopId, item._id, item, 1) }"
                >&#xe668;</span>
            </div>
          </div>
      </div>
      <div class="check">
          <div class="check__icon">
              <img
              src="http://www.dell-lee.com/imgs/vue3/basket.png"
              class="check__icon__img"
              @click="handleCartShowChange"
              />
              <div class="check__icon__tag">{{calculations.total}}</div>
          </div>
          <div class="check__info">
              总计: <span class="check__info__price">&yen; {{calculations.price}}</span>
          </div>
          <div class="check__btn" v-show="calculations.total > 0">
            <router-link :to="{path: `/orderConfirmation/${shopId}`}">
              去结算
            </router-link>
            </div>
      </div>
    </div>
</template>

<script>
import { ref } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { useCommonCartEffect } from '../../effects/cartEffects'
//  获取购物车信息逻辑
const useCartEffect = (shopId) => {
  const { calculations, productList, changeCartItemInfo } = useCommonCartEffect(shopId)
  const store = useStore()
  const changeCartItemChecked = (shopId, productId) => {
    store.commit('changeCartItemChecked', {
      shopId, productId
    })
  }
  const cleanCartProducts = (shopId) => {
    store.commit('cleanCartProducts', { shopId })
  }
  const setCartItemsChecked = (shopId) => {
    store.commit('setCartItemsChecked', { shopId })
  }
  return {
    calculations,
    cleanCartProducts,
    changeCartItemInfo,
    productList,
    changeCartItemChecked,
    setCartItemsChecked
  }
}
// 展示购物车逻辑
const toggleCartEffect = () => {
  const showCart = ref(false)
  const handleCartShowChange = () => {
    showCart.value = !showCart.value
  }
  return { showCart, handleCartShowChange }
}
export default {
  name: 'Cart',
  setup () {
    const route = useRoute()
    const shopId = route.params.id
    const {
      showCart,
      handleCartShowChange
    } = toggleCartEffect()
    const {
      calculations,
      cleanCartProducts,
      changeCartItemInfo,
      productList,
      changeCartItemChecked,
      setCartItemsChecked
    } = useCartEffect(shopId)
    return {
      calculations,
      cleanCartProducts,
      changeCartItemInfo,
      shopId,
      productList,
      changeCartItemChecked,
      setCartItemsChecked,
      showCart,
      handleCartShowChange
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../style/variables.scss";
@import "../../style/mixins.scss";
.mask {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: rgba(0,0,0,0.50);
  z-index: 1;
}
.cart {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: $bgColor;
    z-index: 2;
}
.product {
    overflow-y: scroll;
    flex: 1;
    background-color: $bgColor;
    &__header {
        display: flex;
        margin-bottom: .16rem;
        height: 0.51rem;
        line-height: .51rem;
        border-bottom: .01rem solid $content-bgColor;
        font-size: .14rem;
        color: $content-fontcolor;
        &__all {
            margin-left: .18rem;
            width: 0.64rem;
        }
        &__text {
            vertical-align:middle;
        }
        &__icon {
            margin-right: .084rem;
            vertical-align:middle;
            font-size: .2rem;
            color: $btn-bgColor;
        }
        &__clear {
            flex: 1;
            margin-right: 0.16rem;
            text-align: right;
            &__btn {
              display: inline-block;
            }
        }
    }
    &__item {
        position: relative;
        display: flex;
        height: 0.5rem;
        margin: 0 0 .12rem 0;
        margin-left: .16rem;
        &__checked {
            margin-right: 0.16rem;
            line-height: 0.5rem;
            color: $btn-bgColor;
            font-size: .2rem;
        }
        &__detail {
            overflow: hidden;
        }
        &__img {
          padding-right: .16rem;
          width: 0.46rem;
          height: 0.46rem;
        }
        &__title {
            margin: 0;
            line-height: 0.2rem;
            font-size: .14rem;
            @include ellipsis;
        }
        &__price {
            margin: .06rem 0 0 0;
            line-height: .2rem;
            font-size: .14rem;
        }
        &__yen {
            font-size: .14rem;
            color: $hightlight-fontColor;
        }
        &__origin {
            margin-left: .06rem;
            line-height: .2rem;
            font-size: .1rem;
            color: $light-fontColor;
            text-decoration: line-through;
        }
        .product__number {
            position: absolute;
            right: .18rem;
            bottom: .1rem;
            &__minus, &__plus {
              position: relative;
              top: 0.01rem;
            }
            &__minus {
                color: $medium-fontColor;
                margin-right: .05rem;
            }
            &__plus {
                margin-left: .05rem;
                color: $btn-bgColor;
            }
        }
    }
}
.check {
    display: flex;
    height: 0.49rem;
    line-height: .49rem;
    border-top: .01rem solid $content-bgColor;
    &__icon {
        position: relative;
        width: 0.84rem;
        &__img {
            display: block;
            margin: .12rem auto;
            width: 0.28rem;
            height: 0.26rem;
        }
        &__tag {
            position: absolute;
            right: 0.16rem;
            top: 0.04rem;
            width: 0.2rem;
            height: 0.2rem;
            line-height: 0.2rem;
            text-align: center;
            background-color: $hightlight-fontColor;
            border-radius: 50%;
            color: $bgColor;
            transform: scale(.5);
            transform-origin: left center;
        }
    }
    &__info {
        flex: 1;
        color: $content-fontcolor;
        &__price {
            font-size: .18rem;
            color: $hightlight-fontColor;
        }
    }
    &__btn {
        width: 0.98rem;
        text-align: center;
        background-color: #4FB0F9;
        font-size: .14rem;
        a {
          color: $bgColor;
          text-decoration: none;
        }
    }
}
</style>
